<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/jsp/business/include/doctype.jsp" %>

<!DOCTYPE html>
<html>
<head>
<title>봉사활동  조회</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>


 <style type="text/css"> 
    .table1 caption { text-align:left;  }
    .td_width25_left {text-align:left; border-left: 1px; border-top: 1px; border-right: 1px; border-bottom: 1px;}
     caption{visibility:hidden;overflow:hidden;width:1px;height:1px;font-size:0;line-height:0}
	.table1{width:100%;border-spacing:0;}
	.table1 td,table th{border:0;height:20px; text-align:center; padding:5px 0px 5px 0px;  color:#777; border-bottom:#c7c7c7 1px solid;border-left:#c7c7c7 1px solid; background:#fff;  }
	.table1 th{background:#fbfdfe; border-top:#13b5ea 2px solid;  color:#14374c; padding:5px 0px 5px 0px;  font-weight:bold;}
	.line_right {border-right:#c7c7c7 1px solid;}
	.left_line_right {text-align:left; padding-left:15px; border-right:#c7c7c7 1px solid; }
	.left_line_right_b {text-align:left; padding-left:15px; border-right:#c7c7c7 1px solid; color:#30342d; }
	.left_line_right_head {text-align:left; padding-left:20px; border-right:#c7c7c7 1px solid; border-top:#13b5ea 2px solid;}
	.line_right_b{border-right:#c7c7c7 1px solid;  text-align:center;  color:#30342d;}
	.center{ text-align:center; }
	.left_line_right_plus{text-align:left; padding-left:20px; border-right:#c7c7c7 1px solid; background:#f9f9f9;}
	.table_tit{background:#fbfdfe; border-top:#13b5ea 2px solid;  color:#14374c; padding:5px 0px 5px 0px;  font-weight:bold; text-align:left; padding-left:15px; border-right:#c7c7c7 1px solid;}
</style>


<script type="text/javascript">
$(document).ready(function(){
	$.ajax({
		type: "GET",
		url: "/business/mVolunteer/output.do",
		dataType: "text",
		success: function(data) {
			var array_data = data.split(",");
			var data0 = array_data[1];
			var data1 = array_data[2];
			$("#selectedYearMonth").text(data0);
			parseXml(data1);
		}
	});
	
	function parseXml(xml)
	{
		var html = "";
		
		html += "<table class='table1' id='mainTable'>\r\n";
		html += "<tr>\r\n";
		html += "<th width='25%'>날짜</th>\r\n";
		html += "<th width='25%'>시간</th>\r\n";
		html += "<th colspan='2'>봉사활동내역</th>\r\n";
		html += "</tr>\r\n";
		//$("#inner_table").append(html);
		//alert(html);
		
	  $(xml).find("ROW").each(function()
	  {
		html += "<tr> \r\n<td class='td_width25_left'>" + $(this).find('CARCODE').text() + "</td>";
		html += "\r\n<td class='td_width25_left'>" + $(this).find('MODELNAMEKR').text() + "</td>";
		html += "\r\n<td class='td_width25_left'>" + $(this).find('REGNUMBER').text() + "</td>";
		html += "\r\n<td class='td_width25_left'>" + $(this).find('SCHDATE').text() + "</td>\r\n</tr>\r\n";
		//$("#inner_table").append(html2);
		//alert(html2);
	  });

	  html += "</table>\r\n";
	  $("#inner_table").html(html);
	  //alert(html3);
	}

	$("#pre").click(function(){
		alert("pre");
		var num = "-1";
		var selectedYear = $("#selectedYearMonth").text();
		$("#inner_table").val("");
		$.ajax({
			type: "GET",
			url: "/business/mVolunteer/output.do",
			data:{"num":num, "selectedYear":selectedYear},
			dataType: "text",
			success: function(data) {
				var array_data = data.split(",");
				var data0 = array_data[1];
				var data1 = array_data[2];
				$("#selectedYearMonth").text(data0);
				parseXml(data1);
			}
		});
	});
	
	$("#next").click(function(){
		alert("next");
		var num = "+1";
		var selectedYear = $("#selectedYearMonth").text();
		$("#inner_table").val("");
		
		$.ajax({
			type: "GET",
			url: "/business/mVolunteer/output.do",
			data:{"num":num, "selectedYear":selectedYear},
			dataType: "text",
			success: function(data) {
				var array_data = data.split(",");
				var data0 = array_data[1];
				alert(data0);
				var data1 = array_data[2];
				$("#selectedYearMonth").text(data0);
				parseXml(data1);
			}
		});
	});
});

</script>
</head>
<body>
	<div data-role="page" id="FirstPage">
		<!-- 해더 -->
		<div data-role="header">
			<h1>봉사활동</h1>
		</div>
		<!-- 내용 -->
		<div data-role="content">
		
			<table style="width:100%">
				<tr>
					<td><button type="button" data-icon="arrow-l" value="<" id="pre" /></td>
					<td id="selectedYearMonth" align="center"></td>
					<td><button type="button" data-icon="arrow-r" value=">" id="next" /></td>
					
					<!-- <td><input type="reset" value="left" data-icon="arrow-l" data-iconpos="left" id="pre" /></td>
					<td align="center" id="selectedYearMonth"></td>
					<td><input type="image" value="rigth" data-icon="arrow-r" data-iconpos="right" id="next" /></td> -->
				</tr>
			</table>

			<!-- 
			<table class="table1" id="mainTable">
				<tr>
					<th width="25%">날짜</th>
					<th width="25%">시간</th>
					<th colspan="2" width="50%">봉사활동내역</th>
				</tr>
			</table>
			 -->
			
			<div id="inner_table">
			</div>	
		<!-- <div class="ui-grid-c" border:inset="true">
			<div class="ui-block-a" id="catalogue1"></div>
			<div class="ui-block-b" id="catalogue2"></div>
			<div class="ui-block-c" id="catalogue3"></div>
			<div class="ui-block-d" id="catalogue4"></div>
		</div> -->
		
		</div>
	</div>

</body>
</html>